<template>
  <CusCard
    name="数据对比"
    :content-style="{ height: '267px' }"
    :hide-tab="true"
    :tab-list="[
      { label: 'PM2.5', value: 0 },
      { label: 'PM10', value: 1 },
    ]"
  >
    <div class="sjdb-card">
      <div class="circle-box">
        <div class="circle-text-box">
          <span class="num">70.0%</span>
          <span class="name">PM2.5</span>
        </div>
        <Echarts
          style="height: 100%"
          :options="options"
        />
      </div>
      <div class="data-box">
        <div class="content">
          <div class="info">
            <p class="title">厂区环境</p>
            <p class="num">
              <span class="text text-1">100</span>
              <span class="unit">单位</span>
            </p>
          </div>
        </div>
        <div class="content">
          <div class="info">
            <p class="title">省控指标</p>
            <p class="num">
              <span class="text text-2">80</span>
              <span class="unit">单位</span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </CusCard>
</template>

<script>
import CusCard from './CusCard.vue'
import Echarts from './Echarts.vue'
export default {
  components: {
    CusCard,
    Echarts
  },
  data() {
    return {
      options: {
        series: [
          {
            name: 'PM2.5',
            type: 'pie',
            radius: ['62%', '72%'],
            avoidLabelOverlap: false,
            startAngle: 90,
            clockwise: false,
            label: {
              show: false,
              position: 'center'
            },
            data: [
              {
                value: 70,
                name: '完成',
                itemStyle: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: '#57B3FF' // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: '#5796FF' // 100% 处的颜色
                      }
                    ]
                  }
                }
              },
              {
                value: 30,
                name: '未完成',
                itemStyle: {
                  color: 'rgba(0,0,0,0)'
                }
              }
            ]
          }
        ]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.sjdb-card {
  height: 100%;
  position: relative;
  .circle-box {
    width: 227px;
    height: 227px;
    background-image: url('../images/circle-bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    .circle-text-box {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 100px;
      height: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      gap: 4px;
      .num {
        color: #e5e9ff;
        font-size: 20px;
        font-weight: 600;
      }
      .name {
        color: #6da0ed;
        font-size: 16px;
        font-weight: 500;
      }
    }
  }
  .data-box {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    .content {
      width: 261px;
      height: 88px;
      background: linear-gradient(to right, transparent, rgba(217, 217, 217, 0.1));
      display: flex;
      align-items: center;
      padding-left: 139px;
      .info {
        display: flex;
        flex-direction: column;
        gap: 6px;
        .title {
          color: rgba(205, 213, 255, 0.5);
          font-size: 16px;
          font-weight: 500;
        }
        .num {
          display: flex;
          align-items: baseline;
          .text {
            font-size: 24px;
            font-weight: 600;
            background: linear-gradient(180deg, #fff 24.14%, #ffb677 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
          .text-2 {
            background: linear-gradient(180deg, #fff 24.14%, #7aacff 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
          .unit {
            color: #b1b2b6;
            font-size: 14px;
            font-weight: 400;
            margin-left: 6px;
          }
        }
      }
    }
  }
}
</style>
